<template>
    <router-view></router-view>

    <div class="main">
        <router-link to="/main/home">
            <div class="main-nav">
                <i class="home"></i>
                <span>首页</span>
            </div>
        </router-link>

        <router-link to="/main/lists">
            <div class="main-nav">
                <i class="fenlei"></i>
                <span>分类</span>
            </div></router-link
        >
        <router-link to="/cart">
            <div class="main-nav">
                <i class="shoppingcart"></i>
                <span>购物车</span>
            </div></router-link
        >
        <router-link to="/main/my">
            <div class="main-nav">
                <i class="my"></i>
                <span>我的</span>
            </div></router-link
        >
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useStore } from "../../store/index";
import { getAddress, getLikes } from "../../api/index";

const store = useStore();

//初始化
const init = () => {
    getAddress().then((res: any) => {
        let { result } = res;
        store.getAddrLength(result.length);
    });
    getLikes().then((res: any) => {
        let { content } = res;
        // console.log(content.length);
        store.getLikeLength(content.length);
    });
};

init();
</script>

<style lang="scss" scoped>
.main {
    background: #fff;
    width: 100%;
    padding: 10px 0;
    // height: 60px;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .router-link-active {
        .main-nav {
            .home {
                background-image: url(@/assets/home2.png);
            }
            .fenlei {
                background-image: url(@/assets/fenlei2.png);
            }
            // .shoppingcart {
            //     background-image: url(@/assets/shoppingcart.png);
            // }
            .my {
                background-image: url(@/assets/my2.png);
            }
            span {
                font-size: 12px;
                color: #2c2c2c;
            }
        }
    }

    a {
        padding: 0 20px;
        width: 25%;
        text-align: center;
        .main-nav {
            i {
                display: block;
                width: 20px;
                height: 20px;
                // background: #000;
                margin: 0 auto;
                // background-image: url(@/assets/home.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
            .home {
                background-image: url(@/assets/home.png);
            }
            .fenlei {
                background-image: url(@/assets/fenlei.png);
            }
            .shoppingcart {
                background-image: url(@/assets/shoppingcart.png);
            }
            .my {
                background-image: url(@/assets/my.png);
            }
            span {
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>
